<template>
  <view class="payment tn-safe-area-inset-bottom">
    <tn-navbar
      z-index="1"
      index-url="/pages/mine/payment/payment"
      fixed
      :bottom-shadow="false"
      >添加银行卡</tn-navbar
    >
    <view class="content">
      <view class="content-item tn-flex-center-start">
        <view class="tn-col-3">姓名</view>
        <view class="tn-flex-1"
          ><tn-input
            class="bank-input"
            v-model="accountName"
            placeholder="请输入姓名"
          ></tn-input
        ></view>
      </view>

      <view class="content-item tn-flex-center-start tn-margin-top-sm">
        <view class="tn-col-3">银行账号</view>
        <view class="tn-flex-5"
          ><tn-input
            class="bank-input"
            type="number"
            v-model="accountNumber"
            placeholder="请输入银行账号"
            @change="getBankCode"
          ></tn-input
        ></view>
        <!-- ios h5无法粘贴  暂时取消-->
        <!-- <view class="input-paste">
          <tn-button class="paste-button" type="primary" @click="pasteAccount"
            >粘贴</tn-button
          >
        </view> -->
      </view>

      <view class="content-item tn-flex-center-start tn-margin-top-sm">
        <view class="tn-col-3">开户支行</view>
        <view class="tn-flex-1"
          ><tn-input
            class="bank-input"
            v-model="bankName"
            placeholder="请输入开户支行"
          ></tn-input
        ></view>
      </view>
    </view>
    <view class="bank-tool tn-bg-main" @click="submitBank"> 修改 </view>
  </view>
  <!-- 数字键盘 -->
  <tn-keyboard
    v-model="keyboardValue"
    v-model:show="showKeyboard"
    :mode="keyboardMode"
    :dot="keyboardDot"
    @confirm="handleKeyboardConfirm"
  ></tn-keyboard>

  <tn-toast ref="toast"></tn-toast>
</template>
<script setup lang="ts">
import {
  onMounted,
  ref,
  watch,
  reactive,
  getCurrentInstance,
  ComponentInternalInstance,
} from "vue";
import TnNavbar from "@/tuniao-ui/components/tn-navbar/src/Navbar.vue";
import TnInput from "@/tuniao-ui/components/tn-input/src/Input.vue";
import TnButton from "@/tuniao-ui/components/tn-button/src/Button.vue";
import TnToast from "@/tuniao-ui/components/tn-toast/src/Toast.vue";
import TnKeyboard from "@/tuniao-ui/components/tn-keyboard/src/Keyboard.vue";
import { getRectInfo, uuid } from "@/tuniao-ui/utils";
import { KeyboardMode } from "@/tuniao-ui/types";
import useSystemInfo from "@/tuniao-ui/libs/hooks/useSystemInfo";
import bankList from "./lib/bank.js";
import { updateBank } from "@/api/payment";
import { ResultEnum } from "@/enums/httpEnum";
import { onLoad } from "@dcloudio/uni-app";
import { navBack } from "@/tuniao-ui/utils";

const toast = ref<InstanceType<typeof TnToast>>();

const accountName = ref("");
const accountNumber = ref("");
const bankName = ref("");
const bankCode = ref("");
// 配合自定义键盘操作
const numberRectId: string = uuid();
let pageScrollTop: number = 0;

let keyboardValue = ref<string>("");
let keyboardDot = ref<boolean>(false);
let keyboardMode = ref<KeyboardMode>("number");
let showKeyboard = ref<boolean>(false);

const instance = getCurrentInstance() as ComponentInternalInstance;
const { systemInfo, customNavbar, updateSystemInfo } = useSystemInfo();
updateSystemInfo();

const numberInputClick = async () => {
  await scrollToCustomKeyboardBottom(numberRectId);
  keyboardValue.value = accountNumber.value;
  keyboardMode.value = "number";
  keyboardDot.value = false;
  showKeyboard.value = true;
};
watch(
  () => keyboardValue.value,
  (val: string) => {
    if (keyboardMode.value === "number" && !keyboardDot.value) {
      accountNumber.value = val;
    } else if (keyboardMode.value === "number" && keyboardDot.value) {
      //decimalValue.value = val
    } else if (keyboardMode.value === "card") {
      //idcardValue.value = val
    }
  }
);
const handleKeyboardConfirm = () => {
  showKeyboard.value = false;
};
const scrollToCustomKeyboardBottom = async (rectId: string) => {
  const rect = await getRectInfo(`#${rectId}`, instance);
  const distance =
    220 -
    (systemInfo.value.screenHeight -
      (rect?.bottom || 0) -
      customNavbar.value.height);
  if (distance > 0) {
    uni.pageScrollTo({
      scrollTop: pageScrollTop + distance + 10,
      duration: 50,
    });
  }
};

//获取银行类型
function getBankCode(e: any) {
  if (e.length > 10) {
    uni.request({
      data: {
        cardBinCheck: "true",
        _input_charset: "utf-8",
        cardNo: e,
      },
      method: "GET",
      url: "https://ccdcapi.alipay.com/validateAndCacheCardInfo.json",
      success(res) {
        if (res.data.validated) {
          bankCode.value = res.data.bank;
          console.log(bankCode.value);
          bankName.value = bankList[bankCode.value];
        }
      },
    });
  }
}

function submitBank() {
  if (accountName.value && accountNumber.value && bankName.value) {
    if (accountNumber.value.length < 10) {
      toast.value?.show({
        title: "请完善银行卡账号",
      });
      return;
    }
    let params = {
      accountName: accountName.value,
      accountNumber: accountNumber.value,
      bankName: bankName.value,
      bankCode: bankCode.value,
    };
    updateBank(params).then((res) => {
      if (res.code === ResultEnum.SUCCESS) {
        toast.value?.show({
          title: "修改成功",
        });
        setTimeout(function () {
          navBack();
        }, 2000);
      }
    });
  } else {
    toast.value?.show({
      title: "请完善银行卡信息",
    });
  }
}

onLoad((options: any) => {
  let bankInfo = JSON.parse(decodeURIComponent(options.bankInfo));
  accountName.value = bankInfo.accountName;
  accountNumber.value = bankInfo.accountNumber;
  bankName.value = bankInfo.bankName;
  bankCode.value = bankInfo.bankCode;
});

// function pasteAccount() {

//   //粘贴
//   uni.getClipboardData({
//     success: function (res) {
//       console.log(res.data);
//       account_number.value = res.data;
//       toast.value?.show({
//         title: "粘贴成功",
//       });
//     },
//     fail(err) {
//         let val = JSON.stringify(err);
//         toast.value?.show({
//         title: "粘贴失败" + val,
//       });
//       console.log(err);
//     },
//   });
// }
</script>
<style lang="scss" scoped>
body {
    background-color: #fff;
}
.payment {
  background-color: #fff;
}
.content {
  margin-top: 30rpx;
  padding: 0 20rpx;
  &-item {
    height: 120rpx;
    padding-bottom: 50rpx;
  }
  .input-paste .paste-button {
    padding-top: 15rpx;
    padding-bottom: 15rpx;
  }
}

.bank-input {
  border-bottom: 1px solid #ccc;
}
.bank-tool {
  height: 100rpx;
  padding: 0 20rpx;
  width: 100%;
  position: fixed;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30rpx;
}
</style>
